<mat-card *ngIf="widgetConf" class="card-widget">
  <mat-toolbar-row class="title-bar">
    <h3>{{ widgetConf.title | translate }}</h3>
    <div class="actions action-icon">
      <button mat-button color="default" (click)="widgetConf.onclick()">{{ 'Settings' | translate }}</button>
    </div>
  </mat-toolbar-row>
  <mat-card-content class="clickable">
    <mat-list *ngIf="widgetConf.data.nameserver">
      <mat-list-item *ngFor="let nameserver of widgetConf.data.nameserver" class="card-list-item">
        <span class="label">{{ nameserver.label | translate }}:</span>
        <span class="value">{{ nameserver.value | translate }}</span>
      </mat-list-item>
    </mat-list>
    <mat-list *ngIf="widgetConf.data.ipv4 && widgetConf.data.ipv4.length > 0">
      <mat-list-item class="card-widget-list-item card-list-item">
        <mat-icon class="card-widget-list-icon" *ngIf="widgetConf.icon">{{widgetConf.icon}}</mat-icon>
        <span class="label" *ngIf="widgetConf.showGroupTitle">{{ 'IPv4' | translate }}:</span>
        <span class="value">
          <ul class="sub-ip-list">
            <li class="ip-list" *ngFor="let item of widgetConf.data.ipv4">
              {{item.ip || item}} <span *ngIf="item.dhcp">{{'(DHCP)'}}</span>
            </li>
          </ul>
        </span>

      </mat-list-item>
    </mat-list>
    <mat-list *ngIf="widgetConf.data.ipv6 && widgetConf.data.ipv6.length > 0">
      <mat-list-item class="card-widget-list-item card-list-item">
        <mat-icon class="card-widget-list-icon" *ngIf="widgetConf.icon">{{widgetConf.icon}}</mat-icon>
        <span class="label">{{ 'IPv6' | translate }}:</span>
        <span class="value">
          <ul class="sub-ip-list">
            <li class="ip-list" *ngFor="let item of widgetConf.data.ipv6">
              {{item.ip || item}} <span *ngIf="item.dhcp">{{'(DHCP)'}}</span>
            </li>
          </ul>
        </span>
      </mat-list-item>
    </mat-list>
  </mat-card-content>
</mat-card>